<template>
  <div v-if="!destroy">
    <nav-bar title="活动正文"></nav-bar>
    <activity-card
        v-for="(item) in activity"
        :name="item.user.userName"
        :avatar="item.user.userHead"
        :time-ago="item.updateTime"
        :num="item.loveNumber"
        :text="item.content"
        :id="item.id"
        :activity-name="item.activityName"
        :picture="item.pictures"
        :like="item.love"
        :comment-num="comment.length"
    />
    <comment ref="comment" :comment="comment" @clickRecomment="clickRecomment"/>
    <div class="view-conmment-send-bottom">
      <div class=" view-comment-textarea" @click="clickComment()">
        <div class="textarea-comment">评论</div>
      </div>
    </div>
    <div style="height: 62px"></div>
    <reply-comment ref="detailComment" @sendComment="sendComment" :placeholder="placeholder"></reply-comment>
  </div>
</template>

<script>
import Vue from 'vue';
import NavBar from "@/components/NavBar/NavBar";
import ActivityCard from "@/components/ActivityCard/index";
import Comment from "@/components/Comment/index";
import ReplyComment from "@/components/ReplyComment/index";

export default {
  name: "Detail",
  components: {
    NavBar,
    ActivityCard,
    Comment,
    ReplyComment
  },
  data() {
    return {
      id: 0,
      activity: [],
      comment: [],
      placeholder: '',
      uid: 0,
      SecondCommentIndex: 0,
      destroy: false
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.uid = JSON.parse(localStorage.getItem('loginInfo')).id;
    this.request();
  },
  methods: {
    getActivity() {
      return axios.get('/activity/getById', {
        params: {activityId: this.id},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getAllComment() {
      return axios.get('/comment/getComment', {
        params: {activityId: this.id, pageSize: 100},
        headers: {isShowFullLoading: 'F'}
      })
    },
    request() {
      return axios.all([this.getActivity(), this.getAllComment()])
          .then(axios.spread((activity, comment) => {
            this.comment = comment.result.result;
            this.activity.push(activity.result);
            this.arrangeActivity();
          }));
    },
    arrangeActivity() {
      let tmp = [];
      if (this.activity[0].user.ybUserHead !== null || this.activity[0].user.userHead == '' || this.activity[0].user.userHead == null) {
        this.activity[0].user.userHead = this.activity[0].user.ybUserHead;
      }
      if (this.activity[0].picture1) {
        tmp.push(this.activity[0].picture1)
      }
      if (this.activity[0].picture2) {
        tmp.push(this.activity[0].picture2)
      }
      if (this.activity[0].picture3) {
        tmp.push(this.activity[0].picture3)
      }
      this.activity[0].pictures = [...tmp];
    },
    //回复发布者
    clickComment() {
      this.commentParam = {
        userId: this.uid,
        activityId: this.activity[0].id,
        parentCommentId: -1,
        replyUserId: "",
        replyCommentId: ""
      };
      this.placeholder = '回复' + this.activity[0].user.userName;
      this.$refs.detailComment.open();
    },
    //回复评论
    clickRecomment(item, index) {
      this.SecondCommentIndex = index;
      this.commentParam = {
        userId: this.uid,
        activityId: this.activity[0].id,
        parentCommentId: item.commentId,
        replyUserId: item.userId,
        replyCommentId: -1
      };
      this.$refs.detailComment.open();
      this.placeholder = '回复' + item.userNick + ':';
    },
    sendComment(result) {
      this.commentParam.content = result;
      console.log(this.commentParam);
      axios.post('/comment/add', {
        ...this.commentParam
      }).then(res => {
        if (res.status === 200) {
          new Promise((resolve, reject) => {
            this.request();
            resolve();
          }).then(() => {
            this.$router.go(0);
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
$view-bg-color: #fbfbfb;
$uni-bg-color-grey: #f8f8f8;
$uni-font-size-base: 16px;
$uni-text-sub-color: #666;
.view-conmment-send-bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  background-color: white;
  border-top: 1px solid $view-bg-color;
}

.view-comment-textarea {
  background-color: $uni-bg-color-grey;
  border-radius: 20px;
  padding: 7.5px 10px;
  margin: 12.5px 10px;
  width: 80%;
  flex: 1;
  align-items: center;
}

.textarea-comment {
  padding: 0;
  // width: 100%;
  height: 100%;
  font-size: $uni-font-size-base;
  // color: $uni-text-color;
  color: $uni-text-sub-color;
}
</style>
